<template>
  <div class="ol-detail">
    <div class="form-box">
      <formSelect label="填报类型" v-model="type" :options="reportTypeOptions"/>
    </div>
    <div class="form-box">
      <formInput v-if="type == 0" label="标题" v-model="form.title" />
      <olProject @setProject="setProject" ref="olProject"/>
      <olTask  v-if="type == 1" :project-id="form.project_id" @setTask="setTask" ref="olTask"/>
      <formInput v-if="type == 1" label="计划工时" placeholder="" v-model="form.plan_hours" readonly/>
      <formInput v-if="type == 1" label="已投入" placeholder="" v-model="form.used_hours" readonly/>
      <formInput label="任务进展" v-model="form.complete_percent" />
      <formSelect v-if="type == 0" label="任务类型" v-model="form.task_type" :options="taskOptions"/>
    </div>
    
    <div class="diver-line"></div>
    <div class="form-box">
      <formSelect label="工作类型" v-model="form.work_type" :options="typeOptions"/>
      <formInput label="工时" v-model="form.standard_hours" />
      <!-- <formInput label="普通加班" v-model="form.common_overtime_hours" />
      <formInput label="法定节假日加班" v-model="form.holiday_hours" />
      <formInput label="出差" v-model="form.other_hours" /> -->
      <formTextarea label="工作报告" v-model="form.work_report" />
      <formTextarea label="备注" v-model="form.comment" />
    </div>
    <!-- 审批模块 -->
    <div class="form-btn">
      <div class="btn btn-color1" @click="handleDel">删除</div>
      <!-- <div class="btn btn-color2" @click="handleSave">保存</div> -->
      <div class="btn btn-color3" @click="handleSave">提交</div>
    </div>
    <goback></goback>
  </div>
</template>
<script>
import formInput from '@/components/form-input'
import formSelect from '@/components/form-select'
import formTextarea from '@/components/form-textarea'
import olProject from '@/components/ol-project'
import olTask from '@/components/ol-task'
import { Toast } from 'vant'
import { 
  getReportTaskType,
  getReportType,
  addReport,
  delReport,
  getReport,
  editReport
} from '@/api/ol'
import Goback from '@/components/goback.vue';
export default {
  components: {
    formInput,
    formSelect,
    formTextarea,
    olProject,
    olTask,
    Goback
  },
  data() {
    return {
      reportTypeOptions: [],
      projectOptions: [],
      taskOptions: [],
      typeOptions: [],
      type: '1',
      form: {
        work_type: '', // 工作类型
        category_id: '', // 任务接口带的数据
        complete_percent: '', // 任务接口带的数据
        project_name: '', // 项目名称
        project_id: '', // 项目id
        task_name: '', // 任务名称
        task_id: '', // 任务id
        plan_hours: '', // 计划工时
        used_hours: '', // 已投入
        standard_hours: '', // 工时
        common_overtime_hours: '', // 普通加班
        holiday_hours: '', // 法定节假日加班
        other_hours: '', // 出差
        comment: '', // 备注
        
        title: '', //  标题
        task_type: '', // 任务类型
        work_report: '', // 工作报告
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.reportTypeOptions = [
        {
          id: '1',
          value: '计划内'
        },
        {
          id: '0',
          value: '计划外'
        }
      ]
    })
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.getReport()
    }

    this.getReportTaskType()
    this.getReportType()
  },
  methods: {
    // 删除
    handleDel() {
      if (this.id) {
        delReport({
          report_id: this.id
        })
          .then(() => {
            Toast('删除成功!')
            this.$router.go(-1)
          })
      } else {
        this.$router.go(-1)
      }
    },
    // 获取报工
    getReport() {
      getReport({
        report_id: this.id
      })
        .then(res => {
          this.form = res.data
          this.type = String(this.form.type)
          this.$refs.olProject.selectValue = this.form.project_name
          this.$refs.olTask.selectValue = this.form.task_name
          console.log(res)
        })
    },
    // 保存报工
    handleSave() {
      console.log(this.form)
      let data = {}
      if (this.type == '1') {
        data = {
          report_type: 1,
          work_type: this.form.work_type, //	是	int	工作类型
          category_id: this.form.category_id, //	是	int	任务查询接口中带有的
          project_name: this.form.project_name, //	是	string	项目名称
          project_id: this.form.project_id, //	是	int	项目id
          task_name: this.form.task_name, //	是	string	任务名称
          task_id: this.form.task_id, //	是	string	任务id
          complete_percent: this.form.complete_percent, //	否	float	完成度
          complete: this.form.complete, //_percent	是	string	任务查询接口中带有的
          plan_hours: this.form.plan_hours, //	是	float	计划工时
          used_hours: this.form.used_hours, //	是	float	已投入工时
          standard_hours: this.form.standard_hours, //	否	float	工时
          common_overtime_hours: this.form.common_overtime_hours, //	否	float	普通加班
          holiday_hours: this.form.holiday_hours, //	否	float	法定节假日加班
          other_hours: this.form.other_hours, //	否	float	出差
          comment: this.form.comment, // 否	string	备注
          work_report: this.form.work_report, //	否	string	工作报告
          task_type: this.form.task_type
        }
      } else {
        data = {
          report_type: 2,
          work_type: this.form.work_type, //	是	int	工作类型
          task_type: this.form.task_type, //	是	int	任务类型
          title: this.form.title, //	是	string	标题
          project_name: this.form.project_name, //	是	string	项目名称
          project_id: this.form.project_id, //	是	int	项目id
          complete_percent: this.form.complete_percent, //	否	float	完成度
          standard_hours: this.form.standard_hours, //	否	float	工时
          common_overtime_hours: this.form.common_overtime_hours, //	否	float	普通加班
          holiday_hours: this.form.holiday_hours, //	否	float	法定节假日加班
          other_hours: this.form.other_hours, //	否	float	出差
          comment: this.form.comment, //	否	string	备注
          work_report: this.form.work_report //	否	string	工作报告
        }
      }
      if (this.id) {
        data.report_id = this.id
        editReport(data)
          .then(() => {
            Toast('编辑成功')
            this.$router.push("/ol")
          })
      } else {
        addReport(data)
          .then(() => {
            Toast('填报成功')
            this.$router.push("/ol")
          })
      }
    },
    // 获取任务类型
    getReportTaskType() {
      getReportTaskType({})
        .then(res => {
          this.taskOptions = res.data
        })
    },
    // 获取类型
    getReportType() {
      getReportType({})
        .then(res => {
          this.typeOptions = res.data
        })
    },
    // 设置项目
    setProject(data) {
      this.form.project_name = data.value
      this.form.project_id = data.id
    },
    // 设置任务
    setTask(data) {
      this.form.category_id = data.category_id
      this.form.complete_percent = data.complete_percent
      this.form.task_id = data.id
      this.form.task_name = data.name
      this.form.plan_hours = data.plan_hours
      this.form.used_hours = data.used_hours
    }
  },
}
</script>
<style lang="less" scoped>
.ol-detail {
  min-height: 100vh;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  background: #F7F9F9;
  box-sizing: border-box;
  .diver-line {
    height: 7px;
    background: #F7F9F9;;
  }
  .form-box {
    background: #fff;
  }
  .form-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: #fff;
    height: 34px;
    padding: 13px 15px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    .btn {
      flex: 1;
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      margin-right: 6px;
      border-radius: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
    .btn-color1 {
      // background: #fa4e3e;
      // color: #ffffff
      background: #ebedf0;
      color: #011445;
    }
    .btn-color2 {
      background: #CBEADF;
      color: #009966;
    }
    .btn-color3 {
      background: #009966;
      color: #fff;
    }
  }
}
</style>